<template>
  <div>
    <el-container>
      <el-header>
        <div class="bigbox">
          <div>
            <img src="../../assets/警徽.png" alt/>
            <span class="cq">两江天镜巡防系统</span>
          </div>
          <div class="head">
            <span class="guanli">资源展示</span>
            <span class="show">资源管理</span>
          </div>
          <div class="picture">
            <span>你好，罗平安</span>
            <img
              class="sanjiao"
              src="../../assets/三角下标（正方形）.png"
              alt
            />
            <img class="policeman" src="../../assets/police.jpg" alt/>
          </div>
        </div>
        <img class="title" src="../../assets/组 143@2x.png" alt/>
      </el-header>
      <el-container>
        <el-aside style="width: 260px">
          <el-col :span="12">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#061D3C"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
            >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-claim"></i>
                  <span>查勤监督</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/checking">考勤管理</el-menu-item>
                  <el-menu-item index="/Role/service">临时勤务</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>排班报备</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/roster">排班报备</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-s-claim"></i>
                  <span>可视化巡区管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/visual"
                  >新增可视化巡区域
                  </el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>警务资源管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/policemanage">人员管理</el-menu-item>
                  <el-menu-item index="/Role/equipment">装备管理</el-menu-item>
                </el-menu-item-group>
                <el-menu-item index="/Role/car">车辆管理</el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-s-order"></i>
                  <span>指令流程</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/directive">指令流转</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>智能报告</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/smartReport">智能报告</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-s-tools"></i>
                  <span>系统设置</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="/Role/userSetting"
                  >角色管理
                  </el-menu-item
                  >
                  <el-menu-item index="/Role/managementSetting"
                  >账户管理
                  </el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-aside>
        <el-container class="cjyMain_content">
          <router-view></router-view>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
        ],
        dialogVisible: false,
        multipleSelection: [],
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClosewindow(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {
          });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .el-container {
    min-height: calc(100vh - 80px);
  }

  .el-header {
    .bigbox {
      display: flex;
      justify-content: space-between;
      .cq {
        font-size: 42px;
        color: #ffffff;
      }
      .head {
        display: flex;
        align-items: center;
        span {
          margin: 0 45px;
        }
        .show {
          margin-right: 90px;
          color: #f6dc2e;
          text-decoration: none;
          font-size: 24px;
        }
        .guanli {
          color: #3888ad;
          font-weight: 500;
          text-decoration: none;
          font-size: 24px;
        }
      }
      .picture {
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          font-weight: 500;
          color: #829dbf;
        }
        .sanjiao {
          width: 11px;
          height: 7px;
          margin: 0px 0px 0px 16px;
        }
        .policeman {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          margin: 0px 30px 0px 16px;
        }
      }
    }
    .title {
      width: 100%;
      height: 83px;
      position: absolute;
      left: 0px;
      top: -2px;
      z-index: -1;
    }
  }

  .el-aside {
    overflow: hidden;
  }

  .el-col {
    width: 260px;
    margin-top: 20px;
    height: 100%;
    background: #061d3c;

    .el-submenu__icon-arrow .el-icon-arrow-down {
      display: none;
    }
  }

  .headnavigation {
    margin: 20px 0px;
    .el-breadcrumb__inner {
      color: #2c465c;
    }
  }

  .el-main {
    .el-table td,
    .el-table th.is-leaf {
      text-align: center;
      border: none;
    }
    .el-table th,
    .el-table tr {
      height: 50px;
    }
    /* 表格内背景颜色 */
    .el-table th,
    .el-table tr,
    .el-table td {
      background-color: #0e2b5a;
      font-weight: 500;
      font-size: 16px;
      color: #00ccff;
    }
    /* 鼠标移入表格内背景颜色 */
    .el-table__body tr:hover > td {
      background-color: #134087 !important;
    }
    .el-table td,
    .el-table th {
      padding: 0px;
      height: 70px;
      line-height: 70px;
    }
    .addbox {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 36px;
      .addpeople {
        width: 100px;
        height: 35px;
        border-radius: 5px;
        background: rgba(39, 227, 255, 0.27);
        outline: none;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #03eaff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .deletepeople {
        width: 100px;
        height: 35px;
        outline: none;
        border-radius: 5px;
        background: rgba(24, 66, 103, 0.46);
        border: 1px solid #1992c4;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #5ec8f0;
        margin: 0px 40px 0px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .btn {
      border: none;
      outline: none;
      color: #ffb642;
      background: #0e2b59;
    }
    .delete {
      border: none;
      outline: none;
      color: #fe635d;
      background: #0e2b59;
    }
  }

  /deep/ .el-submenu__icon-arrow {
    display: none;
  }

  /deep/ .el-menu {
    border: 0px solid transparent !important;
  }
</style>
